<script setup>
import HomePanel from './HomePanel.vue'
import {getNewProduct} from '@/api/Home/getNewProduct.ts'
import { onMounted,ref } from 'vue';
const newList = ref([])
const getNew = async()=>{
   const res = await getNewProduct()
   newList.value = res.data.result
}
onMounted(()=>{
    getNew()
})
</script>

<template>
    <div>
        <HomePanel title="新鲜好物" sub-tile="新鲜出炉 品牌靠谱">
            <div class="slotMain">
                <ul>
                    <li v-for="i in newList" :key="i">
                        <img :src="i.picture" alt="">
                        <h4 class="ellipsis">{{ i.name }}</h4>
                        <p class="ellipsis"><i>￥</i><span>{{i.price}}</span></p>
                    </li>
                </ul>
            </div>
        </HomePanel>
    </div>
</template>

<style scoped lang="scss">
.slotMain{
    ul{
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
            &:hover {
                transform: translate3d(0, -3px, 0);
                box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
            }
            ~li{
                margin-left: 15px;
            }
            text-align: center;
            p{
                color: $priceColor;
            }
        }
        
    }
}
</style>